<script setup lang="ts">
import { ref } from 'vue'
const show = ref(true)
const move = function () {
    setTimeout(() => {
        show.value = false
    }, 500);
    localStorage.setItem("isMessage", <any>0)
}
const nomove = function () {
    window.opener = null
    window.open("about:blank", "_top")?.close()
}
if (localStorage.getItem("isMessage") == null) {
    localStorage.setItem("isMessage", <any>1)
}
if (localStorage.getItem("isMessage") == <any>0) {
    show.value = false
}
</script>
<template>
    <van-overlay :show="show">
        <div class="wrapper" @click.stop>
            <div class="block">
                <h1>😊欢迎来到火星小说</h1>
                <div>
                    <p>我们将为您提供</p>
                    <ul>
                        <li>
                            <p>😍海量小说</p>
                        </li>
                        <li>
                            <p>🤤全场免费</p>
                        </li>
                        <li>
                            <p>😘福利活动</p>
                        </li>
                    </ul>
                </div>
                <div>
                    <p>在您使用火星小说前，请您认真阅读并了解完成版<span>用户协议</span>与<span>隐私政策</span>条款</p>
                    <p>1、为更好的提供注册认证，浏览内容等相关服务，我们会根据您使用服务的具体功能需要，收集必须的用户信息；</p>
                    <p>2、未经您同意，我们不会从第三方获取、共享或对外提供您的信息（法律法规规定除外）。</p>
                </div>
                <div>
                    <button @click="nomove">拒绝</button>
                    <button @click="move">同意</button>
                </div>
            </div>
        </div>
    </van-overlay>
</template>

<style scoped lang='less'>
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-family: var(--mfont);
    z-index: 999;
}

.van-overlay {
    z-index: 9999;
    backdrop-filter: blur(4px);
}

.block {
    width: 330px;
    height: 340px;
    background-color: #fff;
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    h1 {
        font-size: 1.2rem;
    }

    div:nth-of-type(1) {
        >p {
            color: #656565;
        }

        ul {
            display: flex;
            justify-content: space-around;

            li {
                font-size: 1.1rem;
                margin: 4px 0;
            }
        }
    }

    div:nth-of-type(2) {
        p {
            font-size: .9rem;
            color: #888;

            span {
                color: rgb(42, 42, 181);
            }
        }
    }

    div:nth-of-type(3) {
        margin-top: 6px;

        button {
            width: 45%;
            margin: 0 6px;
            padding: 6px 0;
            border-radius: 14px;
            border: 0;
            box-shadow: 0 0 10px 0 gainsboro;
            transition: all 0.2s;

            &:active {
                opacity: 0.8;
            }
        }

        button:nth-child(1) {
            background-color: whitesmoke;
        }

        button:nth-child(2) {
            background-color: var(--mcolor);
            color: whitesmoke;
        }
    }
}
</style>